<template>
  <el-button
    size="small"
    type="text"
    @click="open"
    v-hasPermi="['system:feedback:edit']"
  >查看回复</el-button>
  <el-dialog title="回复内容" v-model="visible" :destroy-on-close="true" width="600px" append-to-body>
    <el-timeline v-if="list.length" style="max-width: 560px">
      <el-timeline-item v-for="item in list" :key="item.id" :timestamp="item.replyTime" placement="top">
        <div class="reply-content">
          <h4 class="reply-name">{{ item.replyUserName}}</h4>
          <p v-html="item.replyContent"></p>
        </div>
      </el-timeline-item>
    </el-timeline>
    <el-empty v-else style="max-width: 560px"></el-empty>
  </el-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  import { listReply } from "@/api/system/reply";

  const props = defineProps({
    row: {
      type: Object,
    }
  });
  const visible = ref(false);
  const list = ref([]);
  const open = () => {
    visible.value = true;
    listReply({ feedbackId: props.row.id, pageSize: 100 }).then(res => {
      list.value = res.rows;
    })
  }
</script>

<style scoped>
  .reply-content {
    padding: 8px 16px;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, .12);
  }
  .reply-name {
    font-size: 20px;
    margin: 0;
  }
</style>
